import { Pie } from '@ant-design/charts';
import React from 'react';

export type LineChartProps = {
  data: any[];
  valueField: string;
  labelField: string;
  height:number|undefined;
};

const PieChart: React.FC<LineChartProps> = (props) => {
  const { data, valueField, labelField,  height } = props;
  return (
    <Pie 
          style={{
            width:'100%',
            height:height ? height : '100%'
          }}
          appendPadding= {10}
          data= {data}
          colorField= {labelField}
          angleField= {valueField}
          radius={0.9}
          label= {{
            type: 'inner',
            offset: '-30%',
            content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
            style: {
              fontSize: 14,
              textAlign: 'center',
            },
          }}
          interactions={[
            {
              type: 'element-active',
            },
          ]}
          />     
  );
};

export default PieChart;
